<template>
	<view class="template-collect tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack>
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left'></text>
				<text class='icon tn-icon-home-capsule-fill'></text>
			</view>
		</tn-nav-bar>


		<view class="a" :style="{paddingTop: vuex_custom_bar_height + 'px'}">

			<view class="content">
				<view class="title">会员套餐</view>
				<view class="list">
					<view class="item" v-for="(item,index) in packageList" :key="index"
					 :class="{active: isCheckPackage == index}" @click="isCheckPackage = index">
						<text>{{item.jflxname}}</text>
						<text>¥{{item.zfje}}</text>
						<text>¥{{item.zje}}</text>
						<text>{{item.sm}}</text>
						<text class="bq">{{item.bq}}</text>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="title">支付方式</view>
				<view class="list">
					<radio-group name="">
						<label>
							<radio :disabled="true" :checked="checkPay === 0" /><text>微信支付</text>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="footer">
				<tn-button backgroundColor="#00FFC6" padding="40rpx 0" width="600rpx" shadow fontBold @click="toPay">
					<!-- <text class="tn-icon-light tn-padding-right-xs tn-color-black"></text> -->
					<text class="tn-color-black">确 定</text>
					<text class="tn-icon-pay tn-padding-left-xs tn-color-black"></text>
				</tn-button>
			</view>
		</view>
	</view>
</template>

<script>
	
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import Tools from '@/tools/config.js'
export default {
	name: 'TemplateRecharge',
	mixins: [template_page_mixin],
	data(){
		return{
			packageList:[], // 套餐列表
			isCheckPackage: 0, // 默认选择第一个套餐
			checkPay: 0
		}
	},
	onShow(){
		this.initData()
	},
	methods:{
		initData(){
			let theopenid = uni.getStorageSync('openid')
			let theunionid = uni.getStorageSync('unionid')
			uni.request({
				url: Tools.host + '/wshly.ashx',
				method: 'POST',
				data: {
					'lx': 'user_czjf_s',
					'openid': theopenid,
					'unionid': theunionid,
				},
				success: (res) => {
					//成功
					const a = JSON.parse(res.data.data)
					this.packageList = a
				},
				fail: (res) => {
					console.log('失败' + res)
					uni.showModal({
						title: '失败，请稍后重试',
						showCancel: false
					})
				},
				complete() {
					uni.hideLoading()
				}
			});
		},
		toPay(){
			uni.showLoading({
				title:"正在获取支付参数"
			})
			let theopenid = uni.getStorageSync('openid')
			let theunionid = uni.getStorageSync('unionid')
			uni.request({
				url: Tools.host + '/wshly.ashx',
				method: 'POST',
				data: {
					'lx': 'user_czjf',
					'openid': theopenid,
					'unionid': theunionid,
					'jflx': this.packageList[this.isCheckPackage].jflx
				},
				success: (res) => {
					//成功
					const a = JSON.parse(res.data.data)
					console.log(a)
					this.beginPay(a)
				},
				fail: (res) => {
					console.log('失败' + res)
					uni.showModal({
						title: '失败，请稍后重试',
						showCancel: false
					})
				},
				complete() {
					uni.hideLoading()
				}
			});
		},
		beginPay(obj){
			uni.requestPayment({
			    provider: "wxpay", 
			    appid: Tools.appid,  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
			    nonceStr: obj.nonceStr, // 随机字符串
			    package: obj.package,        // 固定值
			    timeStamp: obj.timeStamp,        // 时间戳（单位：秒）
			    paySign: obj.paySign,
			    signType: obj.signType,
			    success:(res)=> {
					console.log("1111",res)
					// 查询支付状态
					uni.redirectTo({
						url:"./checkPayStatus?orderNo="+obj.out_trade_no
					})
				},
			    fail(e) {
					console.log(e)
					uni.showToast({
						title:"支付失败",
						icon:'none'
					})
				}
			})
		},
	}
}	

</script>

<style lang="scss" scoped>
	
.tn-custom-nav-bar__back {
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	box-sizing: border-box;
	background-color: rgba(0, 0, 0, 0.15);
	border-radius: 1000rpx;
	border: 1rpx solid rgba(255, 255, 255, 0.5);
	color: #FFFFFF;
	font-size: 18px;

	.icon {
		display: block;
		flex: 1;
		margin: auto;
		text-align: center;
	}

	&:before {
		content: " ";
		width: 1rpx;
		height: 110%;
		position: absolute;
		top: 22.5%;
		left: 0;
		right: 0;
		margin: auto;
		transform: scale(0.5);
		transform-origin: 0 0;
		pointer-events: none;
		box-sizing: border-box;
		opacity: 0.7;
		background-color: #FFFFFF;
	}
}

.a{
	height: 100vh;
	position:relative;
	.footer{
		height: 100rpx;
		position:absolute;
		bottom:36rpx;
		left:0;
		right:0;
		display:flex;
		align-items: center;
		justify-content: center;
	}
	.content{
		display:flex;
		flex-direction: column;
		padding: 20rpx;
		background-color: white;
		.title{
			font-size: 28rpx;
			color: #333333;
		}
		.list{
			margin-top:20rpx;
			display:flex;
			flex-direction: row;
			.active{
				border: 1rpx solid gold;
				.bq{
					background-color: darkorange !important;
				}
				text:nth-child(1){
					color: saddlebrown !important;
				}
				text:nth-child(2){
					color: saddlebrown !important;
				}
				text:nth-child(3){
					color: saddlebrown !important;
				}
				text:nth-child(4){
					background-color: darkorange !important;
					color: white !important;
				}
			}
			
			.item{
				flex:1;
				display:flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position: relative;
				box-shadow: 0rpx 0rpx 20rpx #aaaaaa;
				border-radius:16rpx;
				margin: 0 12rpx;
				padding: 20rpx 0;
				.bq{
					position:absolute;
					padding: 0 10rpx;
					border-radius: 0 12rpx 0 12rpx;
					background-color: brown;
					color:white;
					font-size: 20rpx;
					top:-10rpx;
					left:0;
				}
				text:nth-child(1){
					font-size: 30rpx;
					color:#333333;
				}
				text:nth-child(2){
					font-size: 68rpx;
					font-weight: bold;
					color: red;
				}
				text:nth-child(3){
					text-decoration: line-through;
					font-size: 24rpx;
					color:#666666;
				}
				text:nth-child(4){
					color: royalblue;
					font-size: 20rpx;
					padding: 2rpx 16rpx;
					background-color: skyblue;
					margin-top:20rpx;
					border-radius: 20rpx;
				}
			}
		}
	}
}

</style>